/*
 * @Description:
 * @Author: mtt
 * @Date: 2023-07-16 18:21:24
 * @LastEditTime: 2023-07-16 19:07:56
 * @LastEditors: mtt
 * @Reference:
 * @FilePath: \react-my-website-master\src\page\home\components\text\index.js
 */
import React, { Component } from 'react';
import homeCss from '../../home.scss'
/**
 * @name home页文字动画组件
 */
export default class TextNode extends Component {
  constructor() {
    super()
    this.state = {
      span1: false,
      span2: false,
      span3: false,
      cursor: false
    }
  }
  componentDidMount() {
    this.setTimeout0 = setTimeout(() => {
      this.setState({
        span1: true
      })
    }, 1200)
    this.setTimeout1 = setTimeout(() => {
      this.setState({
        span2: true
      })
    }, 1400)
    this.setTimeout2 = setTimeout(() => {
      this.setState({
        span3: true
      })
    }, 1600)
    this.setTimeout3 = setTimeout(() => {
      this.setState({
        cursor: true
      })
    }, 2400)
  }
  componentWillUnmount() {
    clearTimeout(this.setTimeout0)
    clearTimeout(this.setTimeout1)
    clearTimeout(this.setTimeout2)
    clearTimeout(this.setTimeout3)
  }
  render() {
    return (
      <div className={homeCss.text}>
        <span className={this.state.span2 ? homeCss.animate : ''}>Hi！I'm jinkun <span style={{ fontSize: '32px' }}>IKUN</span> </span><br />
        <span className={this.state.span3 ? homeCss.animate : ''}>( σ'ω')σ<strong>#欢迎访问我的个人网站</strong><i className={this.state.cursor ? homeCss.cursor : ''}></i></span><br />
        <span className={this.state.span3 ? homeCss.animate : ''} style={{ fontSize: '32px' }}><strong>人一生下来就会哭，后来才会笑</strong></span><br />
        <span className={this.state.span3 ? homeCss.animate : ''} style={{ fontSize: '32px' }}><strong>所以忧伤是一种本能，而笑是一种能力</strong></span>
      </div >
    )
  }
}
